<template>
    <div>
        <img src="../../assets/images/login-bg.jpg" class="bgClass" />
        <div class="parenBox">
            <div class="loginBox">
                <div class="loginTitle flexCenter">
                    系统登录
                </div>
                <div style="padding-top:25px" class="flexCenter">
                    <span>账号</span>
                    <el-input type="text" v-model="vueLoginMain.account.value" placeholder="账号" :maxlength="11" style="width:220px;">
                    </el-input>
                </div>
                <div style="padding-top:30px" class="flexCenter">
                    <span>密码</span>
                    <el-input type="password" v-model="vueLoginMain.password.value" placeholder="密码" :maxlength="36" style="width:220px;">
                    </el-input>
                </div>
                <div style="padding-top:36px" class="flexCenter">
                    <el-button type="success" :loading="vueLoginMain.btnloading.value" @click="vueLoginMain.login()" style="width:220px;">登录</el-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
    import VueLoginMain from './VueLoginMain'
    let vueLoginMain = new VueLoginMain()
</script>

<style scoped>

@charset "UTF-8";

    .bgClass{
        height:100vh;
        width:100vw;
        position: absolute;
        z-index: -1;
    }
    .parenBox{
        display: flex;
        height:100vh;
        width:100vw;
        justify-content: center;
        align-items: center;
    }
    .loginBox{
        height:285px;
        width:350px;
        border:#686666 1px solid;
        box-shadow:2px 2px 10px #686666;
        color:white;
    }

    .loginBox span{
        padding-left: 20px;
        padding-top: 7px;
        padding-right: 20px;
    }

    .loginTitle{
        padding-top: 20px;
        font-size:20px;
    }

    .flexCenter{
        display:flex;
        justify-content: center;
    }


</style>